<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Wechat H5 Boilerplate</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <!-- Add your keywords and description here for SEO. -->
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" type="image/png" href="images/favicon.png" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Uncomment this if you need apple touch icon. -->
  <!--
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    -->
  <!-- Don't delete this. It's needed for development workflow. -->
  <link rel="stylesheet" href="stylesheets/bundle.css">
</head>

<body>

  <div class="dashboard-container">
    <!-- <div class="dashboard-row-0">
      <div class="title">
        杨腾数据可视化界面
      </div>
    </div> -->


      <div class="col-1"  style="height:400px">
        <div class="calendar dashboard-panel">
          <div class="panel-title">
            杨腾系统安全运行
          </div>
          <div class="panel-body">
            <!-- <div class="day-container" style="flex:1;">
              <h3 class="day-time">365</h3><span>天</span>
            </div> -->
            <div id="dayChart" style="flex:2;padding-right: 20px">

            </div>

          </div>
        </div>
      </div>

      <div class="col-1" style="height:400px">
        <div class=" dashboard-panel" style="flex:1">
 
          <div class="panel-body">
            <div class="store-ration">
              <div class="store-ration-chart" style="flex:2">
                <div id="storeRation"></div>

              </div>

            </div>
          </div>
        </div>
      </div>








      <div class="col-1" style="height:400px">
        <div class=" dashboard-panel" style="flex:3">
          <div class="panel-title">
            出入库图表

          </div>
          <div class="panel-body" style="flex-direction:row;">
            <div id="inboundChart" style="flex:3"></div>

          </div>

        </div>

      </div>
      <div class="col-1" style="height:400px">

        <div class="dashboard-panel">
       
          <div class="panel-body">
            <div class="dashboard-panel" style="flex:3;padding:12px" id="KPIChart"></div>

          </div>
        </div>
      </div>

  </div>

  <!-- Don't delete this. It's needed for development workflow. -->
  <script src="javascripts/bundle.js"></script>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>
<!-- <script>

  (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module.
      define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
      // CommonJS
      factory(exports, require('echarts'));
    } else {
      // Browser globals
      factory({}, root.echarts);
    }
  }(this, function (exports, echarts) {
    var log = function (msg) {
      if (typeof console !== 'undefined') {
        console && console.error && console.error(msg);
      }
    };
    if (!echarts) {
      log('ECharts is not Loaded');
      return;
    }
    echarts.registerTheme('customed', {
      "color": [

        "#00c5d2",
        "#ef98d0",
        "#802bff",
        "#54c6af",
        "#edcd61",
        "#0081fa",
        "#73e3f8",
        "#ffd473",
        "#1c3a9f",
        "#421b9f",
        "#16889d"
      ],
      "backgroundColor": "rgba(255,255,255,0)",
      "textStyle": {},
      "title": {
        "textStyle": {
          "color": "#ffffff"
        },
        "subtextStyle": {
          "color": "#ffffff"
        }
      },
      "line": {
        "itemStyle": {
          "normal": {
            "borderWidth": "1"
          }
        },
        "lineStyle": {
          "normal": {
            "width": "2"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true
      },
      "radar": {
        "itemStyle": {
          "normal": {
            "borderWidth": "1"
          }
        },
        "lineStyle": {
          "normal": {
            "width": "2"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true
      },
      "bar": {
        "itemStyle": {
          "normal": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
          },
          "emphasis": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
          }
        }
      },
      "pie": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "scatter": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "boxplot": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "parallel": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "sankey": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "funnel": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "gauge": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "candlestick": {
        "itemStyle": {
          "normal": {
            "color": "#c23531",
            "color0": "#314656",
            "borderColor": "#c23531",
            "borderColor0": "#314656",
            "borderWidth": 1
          }
        }
      },
      "graph": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        },
        "lineStyle": {
          "normal": {
            "width": 1,
            "color": "#aaa"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true,
        "color": [
          "#567bf4",
          "#00c5d2",
          "#bda5f7",
          "#ff9900",
          "#809dfa",
          "#a37ffa",
          "#73e3f8",
          "#ffd473",
          "#1c3a9f",
          "#421b9f",
          "#16889d"
        ],
        "label": {
          "normal": {
            "textStyle": {
              "color": "#ffffff"
            }
          }
        }
      },
      "map": {
        "itemStyle": {
          "normal": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": "0"
          },
          "emphasis": {
            "areaColor": "rgba(255,197,68,1)",
            "borderColor": "#444",
            "borderWidth": "0"
          }
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#000"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "rgb(100,0,0)"
            }
          }
        }
      },
      "geo": {
        "itemStyle": {
          "normal": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": "0"
          },
          "emphasis": {
            "areaColor": "rgba(255,197,68,1)",
            "borderColor": "#444",
            "borderWidth": "0"
          }
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#000"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "rgb(100,0,0)"
            }
          }
        }
      },
      "categoryAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {

            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "rgba(255,255,255,.5)"
          }
        },
        "splitLine": {
          "show": false,
          "lineStyle": {
            "color": [
              "#ccc"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "valueAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "rgba(255,255,255,.5)"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#ccc"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "logAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": true,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#333"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#a5adb4"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "timeAxis": {
        "axisLine": {
          "show": true,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": true,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#333"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#ccc"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "toolbox": {
        "iconStyle": {
          "normal": {
            "borderColor": "#999"
          },
          "emphasis": {
            "borderColor": "#666"
          }
        }
      },
      "legend": {
        "textStyle": {
          "color": "#333"
        }
      },
      "tooltip": {
        "axisPointer": {
          "lineStyle": {
            "color": "#ccc",
            "width": 1
          },
          "crossStyle": {
            "color": "#ccc",
            "width": 1
          }
        }
      },
      "timeline": {
        "lineStyle": {
          "color": "#293c55",
          "width": 1
        },
        "itemStyle": {
          "normal": {
            "color": "#293c55",
            "borderWidth": 1
          },
          "emphasis": {
            "color": "#aa5de6"
          }
        },
        "controlStyle": {
          "normal": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
          },
          "emphasis": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
          }
        },
        "checkpointStyle": {
          "color": "#e43c59",
          "borderColor": "rgba(194,53,49, 0.5)"
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#293c55"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "#293c55"
            }
          }
        }
      },
      "visualMap": {
        "color": [
          "#223db4",
          "#6c82e3",
          "#ced7ff"
        ]
      },
      "dataZoom": {
        "backgroundColor": "#225555",
        "dataBackgroundColor": "rgba(47,69,84,0.3)",
        "fillerColor": "rgba(167,183,204,0.4)",
        "handleColor": "#a7b7cc",
        "handleSize": "100%",
        "textStyle": {
          "color": "#333"
        }
      },
      "markPoint": {
        "label": {
          "normal": {
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "#ffffff"
            }
          }
        }
      }
    });
  }));


</script> -->
<script>

  (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
      // AMD. Register as an anonymous module.
      define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
      // CommonJS
      factory(exports, require('echarts'));
    } else {
      // Browser globals
      factory({}, root.echarts);
    }
  }(this, function (exports, echarts) {
    var log = function (msg) {
      if (typeof console !== 'undefined') {
        console && console.error && console.error(msg);
      }
    };
    if (!echarts) {
      log('ECharts is not Loaded');
      return;
    }
    echarts.registerTheme('customed', {
      "color": [
        "#2B66F0",
        "#25C9A7",
        "#FFA800",
        "#567bf4",
        "#00c5d2",
        "#bda5f7",
        "#ff9900",
        "#809dfa",
        "#a37ffa",
        "#73e3f8",
        "#ffd473",
        "#1c3a9f",
        "#421b9f",
        "#16889d",
        "#333333"
      ],
      "backgroundColor": "rgba(0, 0, 0, 0)",
      "textStyle": {},
      "title": {
        "textStyle": {
          "color": "#344355"
        },
        "subtextStyle": {
          "color": "#76818e"
        }
      },
      "line": {
        "itemStyle": {
          "normal": {
            "borderWidth": "1"
          }
        },
        "lineStyle": {
          "normal": {
            "width": "2"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true
      },
      "radar": {
        "itemStyle": {
          "normal": {
            "borderWidth": "1"
          }
        },
        "lineStyle": {
          "normal": {
            "width": "2"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true
      },
      "bar": {
        "itemStyle": {
          "normal": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
          },
          "emphasis": {
            "barBorderWidth": "0",
            "barBorderColor": "#cccccc"
          }
        }
      },
      "pie": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "scatter": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "boxplot": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "parallel": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "sankey": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "funnel": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "gauge": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          },
          "emphasis": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        }
      },
      "candlestick": {
        "itemStyle": {
          "normal": {
            "color": "#f82e49",
            "color0": "#25c9a7",
            "borderColor": "#f82e49",
            "borderColor0": "#25c9a7",
            "borderWidth": 1
          }
        }
      },
      "graph": {
        "itemStyle": {
          "normal": {
            "borderWidth": "0",
            "borderColor": "#cccccc"
          }
        },
        "lineStyle": {
          "normal": {
            "width": 1,
            "color": "#aaa"
          }
        },
        "symbolSize": "6",
        "symbol": "circle",
        "smooth": true,
        "color": [
          "#567bf4",
          "#00c5d2",
          "#bda5f7",
          "#ff9900",
          "#809dfa",
          "#a37ffa",
          "#73e3f8",
          "#ffd473",
          "#1c3a9f",
          "#421b9f",
          "#16889d",
          "#333333"
        ],
        "label": {
          "normal": {
            "textStyle": {
              "color": "#ffffff"
            }
          }
        }
      },
      "map": {
        "itemStyle": {
          "normal": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": "0"
          },
          "emphasis": {
            "areaColor": "rgba(255,197,68,1)",
            "borderColor": "#444",
            "borderWidth": "0"
          }
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#000"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "rgb(100,0,0)"
            }
          }
        }
      },
      "geo": {
        "itemStyle": {
          "normal": {
            "areaColor": "#eee",
            "borderColor": "#444",
            "borderWidth": "0"
          },
          "emphasis": {
            "areaColor": "rgba(255,197,68,1)",
            "borderColor": "#444",
            "borderWidth": "0"
          }
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#000"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "rgb(100,0,0)"
            }
          }
        }
      },
      "categoryAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#333"
          }
        },
        "splitLine": {
          "show": false,
          "lineStyle": {
            "color": [
              "#ccc"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "valueAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#87a0b3"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#cccccc"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "logAxis": {
        "axisLine": {
          "show": false,
          "lineStyle": {
            "color": "#333"
          }
        },
        "axisTick": {
          "show": true,
          "lineStyle": {
            "color": "#e9e6e6"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#333"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#e9e6e6"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "timeAxis": {
        "axisLine": {
          "show": true,
          "lineStyle": {
            "color": "#e9e6e6"
          }
        },
        "axisTick": {
          "show": true,
          "lineStyle": {
            "color": "#e9e6e6"
          }
        },
        "axisLabel": {
          "show": true,
          "textStyle": {
            "color": "#3d454b"
          }
        },
        "splitLine": {
          "show": true,
          "lineStyle": {
            "color": [
              "#e9e6e6"
            ]
          }
        },
        "splitArea": {
          "show": false,
          "areaStyle": {
            "color": [
              "rgba(250,250,250,0.3)",
              "rgba(200,200,200,0.3)"
            ]
          }
        }
      },
      "toolbox": {
        "iconStyle": {
          "normal": {
            "borderColor": "#999"
          },
          "emphasis": {
            "borderColor": "#666"
          }
        }
      },
      "legend": {
        "textStyle": {
          "color": "#333"
        }
      },
      "tooltip": {
        "axisPointer": {
          "lineStyle": {
            "color": "#ffffff",
            "width": 1
          },
          "crossStyle": {
            "color": "#ffffff",
            "width": 1
          }
        }
      },
      "timeline": {
        "lineStyle": {
          "color": "#293c55",
          "width": 1
        },
        "itemStyle": {
          "normal": {
            "color": "#293c55",
            "borderWidth": 1
          },
          "emphasis": {
            "color": "#aa5de6"
          }
        },
        "controlStyle": {
          "normal": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
          },
          "emphasis": {
            "color": "#293c55",
            "borderColor": "#293c55",
            "borderWidth": 0.5
          }
        },
        "checkpointStyle": {
          "color": "#e43c59",
          "borderColor": "rgba(194,53,49, 0.5)"
        },
        "label": {
          "normal": {
            "textStyle": {
              "color": "#293c55"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "#293c55"
            }
          }
        }
      },
      "visualMap": {
        "color": [
          "#223db4",
          "#6c82e3",
          "#ced7ff"
        ]
      },
      "dataZoom": {
        "backgroundColor": "rgba(47,69,84,0.19)",
        "dataBackgroundColor": "rgba(47,69,84,0.3)",
        "fillerColor": "rgba(167,183,204,0.4)",
        "handleColor": "#a7b7cc",
        "handleSize": "100%",
        "textStyle": {
          "color": "#333333"
        }
      },
      "markPoint": {
        "label": {
          "normal": {
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "emphasis": {
            "textStyle": {
              "color": "#ffffff"
            }
          }
        }
      }
    });
  }));
</script>

</html>